<template>
    <div>
<el-form ref="itemAdd"  :rules="rules" :model="item" label-width="150px">
  <el-form-item label="创建产品分类" prop="cateName">
    <el-input style="width:300px" v-model="item.cateName"></el-input>
  </el-form-item>
  <el-form-item label="父级">
    <el-select v-model="item.pid" placeholder="女装26">
      <el-option label="顶层分类" :value="0"></el-option>
      <el-option
        v-for="item in cates"
        :key="item.id"
        :label="item.cateName"
        :value="item.id"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="价格" prop="price">
    <el-input  style="width:300px" v-model="item.price"></el-input>
  </el-form-item>
  <!-- -----------------------------上传图标------------------------- -->
  <el-form-item label="上传商品图标">
<el-upload
  ref="upload"
  class="upload-demo"
  action="/api/upload"
  name="file"
  accept=".png, .jpg, .jpeg, .dox, .html"
  :headers="{token:32123}"
  :data="{ a:10, b:20 }"
  list-type="picture"
  :auto-upload="false"
  :before-upload="beforeUpload"
  :on-success="uploadSuccess"
  >
  <el-button size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
  <el-button size="small" @click="uploadSubmit" type="success">点击上传</el-button>
  </el-form-item>
  <!-- -----------------------------上传图标------------------------- -->
  <el-form-item label="排序" prop="sort">
     <el-input-number v-model="item.sort" :min="1" :max="2" label="描述文字"></el-input-number>
  </el-form-item>
   <el-form-item label="状态" prop="enAbled">
    <el-switch v-model="item.enAbled"></el-switch>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="resetForm('item')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
import { addItem } from '_api'
export default {
  props: {
    cates: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
    // 新增item
      item: {
        cateName: '',
        pid: '',
        price: '',
        sort: 0,
        enAbled: true,
        img: ''
      },
      // 表单验证
      rules: {
        cateName: [
        // 必填验证
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
        // 必填验证
          { required: true, message: '价格必填', trigger: 'blur' },
          { min: 2, max: 8, message: '价格必须在 2 到 8 个数字', trigger: 'blur' }
        ],
        sort: [
        // 必填验证
          { required: true, message: '排序必填', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 文件上传得进度
    uploadSuccess (res) {
      if (res.code === 200) {
        this.item.img = res.data.url
        this.$message({
          showClose: true,
          message: '贺喜贺喜！上传图片成功❤',
          type: 'success'
        })
      }
    },
    // 点击上传文件
    uploadSubmit () {
      this.$refs.upload.submit()
    },
    // 上传之前前行判断
    beforeUpload (file) {
      if (file.size > (1000 * 1024)) {
        this.$message.error('上传的文件太大啦')
        return false
      } else {
        return true
      }
    },
    onSubmit (res, file) {
      this.$refs.itemAdd.validate(valid => {
        if (valid) {
          // 验证通过
          addItem(this.item).then(res => {
            console.log(res)
            this.$message({
              showClose: true,
              message: '大吉大利！添加商品成功❤',
              type: 'success'
            })
            this.$router.go(0)
          })
        } else {
        // 不通过
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
